import Image from 'next/image'

type T = {
  title: string
  desc: string | Array<string>
  img: any
}
export default function Hero(props: T) {
  const { title, desc, img } = props

  return (
    <div className="flex justify-between gap-6 py-[120px] max-sm:flex-col-reverse max-sm:py-[60px]">
      <div className="w-[405px] h-[446px] max-sm:w-full max-sm:h-auto">
        <Image src={img} alt="main picture" quality={100} />
      </div>
      <div className="flex flex-col gap-[26px] w-[448px] max-sm:w-full max-sm:gap-[20px]">
        <h2 className="leading-tight text-secondTitle text-black font-bold max-sm:text-center">
          {title}
        </h2>
        {Array.isArray(desc) ? (
          desc.map((item) => (
            <div
              className="text-desc text-menuTxt max-sm:text-center opacity-80"
              key={item}
            >
              {item}
            </div>
          ))
        ) : (
          <div className="text-desc text-menuTxt max-sm:text-center opacity-80">
            {desc}
          </div>
        )}
      </div>
    </div>
  )
}
